<template>
  <div class="index">
    <!-- 搜索框 -->
    <search></search>
    <!-- 网红歌曲 -->
    <van-row type="flex" justify="space-around">
      <van-col class="col_title" span="9" tag='p'>网红歌曲</van-col>
      <van-col class="col_more" span="9">
        <span class="more_span1">更多 </span>
        <span class="more_span2">></span>
      </van-col>
    </van-row>
    <van-row type="flex" class="row_box" justify="space-around">
      <van-col class="col_img" offset='1' span="9"></van-col>
      <van-col class="col_text" span="9">
        <div class="col_text_title">单人旅途</div>
        <div class="col_text_describe">许嵩-寻物启事</div>
      </van-col>
      <van-col class="col_buttom" span="9">
        <button class="button">播放</button>
      </van-col>
    </van-row>
    <van-row type="flex" class="row_box" justify="space-around">
      <van-col class="col_img" offset='1' span="9"></van-col>
      <van-col class="col_text" span="9">
        <div class="col_text_title">单人旅途</div>
        <div class="col_text_describe">许嵩-寻物启事</div>
      </van-col>
      <van-col class="col_buttom" span="9">
        <button class="button">播放</button>
      </van-col>
    </van-row>
    <!-- 实力歌手 -->
    <van-row type="flex" justify="space-around">
      <van-col class="col_title col_title2" span="9" tag='div'>实力歌手</van-col>
      <van-col class="col_more more2" span="9">
        <span class="more_span3">更多 </span>
        <span class="more_span4">></span>
      </van-col>
    </van-row>
    <van-row type="flex" class="row_box box_gs" justify="space-around">
      <van-col class="col_img" offset='1' span="9"></van-col>
      <van-col class="col_text" span="9">
        <div class="col_text_title text_gs">李荣浩</div>
        <div class="col_text_describe describe_gs" >标签：内地、实力、魅力</div>
      </van-col>
      <van-col class="col_buttom" span="9">
      </van-col>
    </van-row>
    <van-row type="flex" class="row_box box_gs" justify="space-around">
      <van-col class="col_img" offset='1' span="9"></van-col>
      <van-col class="col_text" span="9">
        <div class="col_text_title text_gs">李荣浩</div>
        <div class="col_text_describe describe_gs" >标签：内地、实力、魅力</div>
      </van-col>
      <van-col class="col_buttom" span="9">
      </van-col>
    </van-row>
    <!-- 符合最近收听音乐 -->
    <van-row type="flex" class="" justify="space-around">
      <van-col class="col_title col_title2" span="9" tag='div'>符合最近收听音乐</van-col>
      <van-col class="col_more more2" span="9">
        <span class="more_span3">更多 </span>
        <span class="more_span4">></span>
      </van-col>
    </van-row>
    <van-row type="flex" class="row_box box_music" justify="space-around">
      <van-col class="col_img" offset='1' span="9"></van-col>
      <van-col class="col_text" span="9">
        <div class="col_text_title">单人旅途</div>
        <div class="col_text_describe">许嵩-寻物启事</div>
      </van-col>
      <van-col class="col_buttom" span="9">
        <button class="button">播放</button>
      </van-col>
    </van-row>
    <van-row type="flex" class="row_box" justify="space-around">
      <van-col class="col_img" offset='1' span="9"></van-col>
      <van-col class="col_text" span="9">
        <div class="col_text_title">单人旅途</div>
        <div class="col_text_describe">许嵩-寻物启事</div>
      </van-col>
      <van-col class="col_buttom" span="9">
        <button class="button">播放</button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.col_title{
  height: 16px;
  font-size: 14px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  /* background-color: rgba(0, 255, 255, 0.692); */
}
.col_more{
  height: 23px;
  margin-top: 12px;
  text-align: right;
  /* background-color: rgba(0, 255, 255, 0.493); */
}
.more_span1{
  font-size: 12px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
}
.more_span2{
  font-size: 20px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  line-height: 25px;
}
.row_box{
  /* background-color: antiquewhite; */
  margin-bottom: 11px;
}
.col_img{
  width: 100px;
  height: 84px;
  border-radius: 8px;
  background-color: rgba(0, 255, 255, 0.493);
  background: url('https://img.imgdb.cn/item/606569ad8322e6675c92215b.png');
  background-size: 150%;
  background-repeat: no-repeat;
}
.col_text{
  width: 100px;
  height: 84px;
  /* background-color: rgba(0, 255, 255, 0.493); */
}
.col_buttom{
  width: 70px;
  height: 84px;
  /* background-color: rgba(0, 255, 255, 0.493); */
}
.col_text_title{
  width: 69px;
  height: 18px;
  font-size: 16px;
  font-family: 楷体;
  color: #333333;
  font-weight: 500;
  margin-top: 22px;
}
.col_text_describe{
  width: 79px;
  height: 13px;
  font-size: 11px;
  font-family: 楷体;
  color: #333333;
  font-weight: 500;
  margin-top: 8px;
}
.button{
  width: 48px;
  height: 23px;
  font-size: 12px;
  /* font-weight: bold; */
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  border: 1px solid #0099FF;
  background-color: white;
  border-radius: 14px;
  color: #0099FF;
  margin: 27px 10px;
}
/* 实力歌手 */
.col_title2{
  margin-top: 6px;
}
.more_span3{
  font-size: 12px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
}
.more_span4{
  font-size: 20px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  line-height: 25px;
}
.more2{
  margin-top: 4px;
}
.box_gs{
  margin-top: 10px;
}
.describe_gs{
  width: 135px;
}
/*  */
.box_music{
  margin-top: 10px;
}
</style>
